import React from 'react';
import { CenterMap, LEFTS, RIGHTS } from './components';
import Box from '../components/Box';
import { provinceDaTangLargeScreen } from '../services';
import mockLayout from './mock';
import styles from './index.less';

export default () => {
  /** data */
  const [result, setResult] = React.useState(null);
  const [loading, setLoading] = React.useState(true);

  /** lifes */
  React.useEffect(() => {
    fetch();
  }, []);

  /** methods */
  const fetch = async () => {
    setLoading(true);
    const res = await provinceDaTangLargeScreen();
    setLoading(false);
    res.layout = mockLayout;
    // if (!!res?.layout) {
    //   try {
    //     res.layout = JSON.parse(res.layout);
    //   } catch (error) {}
    // }
    setResult(res);
  };

  /** template */
  const _renderBox = (mods) => {
    return mods.map((item) => {
      const ItemComponent = item.component || null;
      const itemProps = {
        loading,
        dataSource: result,
      };
      return (
        <div key={item.title} style={{ height: item.height }}>
          <Box title={item.title} arrow={item.arrow}>
            {ItemComponent && <ItemComponent {...itemProps} />}
          </Box>
        </div>
      );
    });
  };
  return (
    <div className={styles.main}>
      <div className={styles.side}>{_renderBox(LEFTS)}</div>
      <div className={styles.mid}>
        <CenterMap dataSource={result} />
      </div>
      <div className={styles.side}>{_renderBox(RIGHTS)}</div>
    </div>
  );
};
